<template>
  <div class="profile-dropdown">
    <el-dropdown @command="handleCommand" trigger="click">
      <div class="profile-trigger">
        <el-avatar :size="32" :src="userStore.avatar" class="user-avatar">
          {{ userStore.displayName.charAt(0) }}
        </el-avatar>
        <span class="user-name">{{ userStore.displayName }}</span>
        <el-icon class="dropdown-icon">
          <ArrowDown />
        </el-icon>
      </div>
      
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="profile">
            <el-icon><User /></el-icon>
            <span>个人资料</span>
          </el-dropdown-item>
          <el-dropdown-item command="settings">
            <el-icon><Setting /></el-icon>
            <span>账号设置</span>
          </el-dropdown-item>
          <el-dropdown-item divided command="logout">
            <el-icon><SwitchButton /></el-icon>
            <span>退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script>
import { useUserStore } from '@/store/user'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowDown, User, Setting, SwitchButton } from '@element-plus/icons-vue'

export default {
  name: 'ProfileDropdown',
  components: {
    ArrowDown,
    User,
    Setting,
    SwitchButton
  },
  setup() {
    const userStore = useUserStore()
    const router = useRouter()

    const handleCommand = async (command) => {
      switch (command) {
        case 'profile':
          // 跳转到个人资料页面
          router.push('/profile')
          break
        case 'settings':
          // 跳转到账号设置页面
          router.push('/settings')
          break
        case 'logout':
          try {
            await ElMessageBox.confirm(
              '确定要退出登录吗？',
              '提示',
              {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }
            )
            
            await userStore.logout()
            ElMessage.success('退出登录成功')
            router.push('/login')
          } catch (error) {
            if (error !== 'cancel') {
              ElMessage.error('退出登录失败')
            }
          }
          break
        default:
          break
      }
    }

    return {
      userStore,
      handleCommand
    }
  }
}
</script>

<style lang="scss" scoped>
.profile-dropdown {
  .profile-trigger {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;

    &:hover {
      background-color: #f5f7fa;
    }

    .user-avatar {
      margin-right: 8px;
      flex-shrink: 0;
    }

    .user-name {
      font-size: 14px;
      color: #303133;
      margin-right: 8px;
      max-width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .dropdown-icon {
      font-size: 12px;
      color: #909399;
      transition: transform 0.2s;
    }
  }

  :deep(.el-dropdown-menu__item) {
    display: flex;
    align-items: center;
    padding: 8px 16px;

    .el-icon {
      margin-right: 8px;
      font-size: 16px;
    }

    span {
      font-size: 14px;
    }

    &:hover {
      background-color: #f5f7fa;
      color: #409eff;
    }
  }
}
</style>
